<template>
	<view class="ticket-detail-wrap">
		<view class="ticket-detail-swiper-wrap">
			<u-swiper :list="imgArr"></u-swiper>
		</view>

		<view class="ticket-detail-desc-wrap">
			<view class="ticket-detail-desc-top">
				<text class="ticket-detail-unit">￥</text>
				<view class="ticket-detail-price">199</view>
				<text class="ticket-detail-min-text">优惠价</text>
			</view>
			<view class="ticket-detail-desc-bottom">
				<view class="ticket-detail-old-price">原价:<text>￥455.00</text></view>
				<view class="ticket-detail-line"></view>
				<view class="ticket-detail-desc">已售:13件</view>
			</view>
		</view>

		<view class="ticket-detail-title-wrap">
			<view class="ticket-detail-name">次卡</view>
			<view class="ticket-detail-title-desc">开卡后30天有效，请前往前台进行人脸识别。</view>
		</view>

		<view class="ticket-detail-comment-wrap">
			<view class="ticket-detail-comment-item">使用说明:</view>
			<view class="ticket-detail-comment-item">1、本卡不记名使用，购买成功后请前往前台扫核销码入场;</view>
			<view class="ticket-detail-comment-item">2、有效期从办卡日起，在游泳馆暑期开放时间使用，闭馆时间以通知为准;</view>
			<view class="ticket-detail-comment-item">3、使用时间:16:00-22: 00;</view>
			<view class="ticket-detail-comment-item">4、由于天气影响等非主观原因暂停开放的不延期;</view>
			<view class="ticket-detail-comment-item">5、本卡办理成功后，不支持退费;</view>
			<view class="ticket-detail-comment-item">6、本卡当年有效，请在有效期内使用，逾期无效;</view>
			<view class="ticket-detail-comment-item">7、在法律范围内本场馆保留最终解释权。</view>
		</view>

		<view class="ticket-detail-btn-wrap">
			<view class="ticket-detail-btn" @tap="handleBuy">购买</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'ticketDetail',
		data() {
			return {
				imgArr: [
					'https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg',
					'https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg',
					'https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg'
				],
			}
		},
		methods: {
			handleBuy() {
				console.log('购买')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ticket-detail-wrap {
		width: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		min-height: 100vh;
		height: auto;
		padding-bottom: 100rpx;
		position: relative;
		box-sizing: border-box;
		background-image: linear-gradient(#fdfcf5, #fff);
	}

	.ticket-detail-swiper-wrap {
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}

	.ticket-detail-desc-wrap {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		min-height: 124rpx;
		background-image: linear-gradient(to right, $global-color-golden, #e0b455);
		padding: 24rpx;
	}

	.ticket-detail-desc-top,
	.ticket-detail-desc-bottom {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		width: 100%;
		height: auto;
		color: #fff;
		font-size: 24rpx;
		box-sizing: border-box;
	}

	.ticket-detail-desc-bottom {
		margin-top: 20rpx;
	}

	.ticket-detail-price {
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 16rpx;
		margin-right: 8rpx;
		box-sizing: border-box;
	}

	.ticket-detail-desc-bottom {
		align-items: flex-start;
		box-sizing: border-box;
	}

	.ticket-detail-line {
		width: 4rpx;
		height: 23rpx;
		background-color: #fff;
		margin-left: 16rpx;
		margin-right: 16rpx;
		margin-top: 6rpx;
		box-sizing: border-box;
	}

	.ticket-detail-old-price {
		text-decoration: line-through;
	}

	.ticket-detail-old-price text {
		margin-left: 10rpx;
		box-sizing: border-box;
	}

	.ticket-detail-unit {
		margin-top: 9rpx;
	}

	.ticket-detail-min-text {
		margin-top: 9rpx;
	}

	.ticket-detail-title-wrap {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 17rpx 24rpx;
		font-size: 24rpx;
		background-color: #fff;
	}

	.ticket-detail-title-desc {
		margin-top: 20rpx;
		color: $global-color-golden;
	}

	.ticket-detail-comment-wrap {
		width: 100%;
		height: auto;
		background-color: #fff;
		font-size: 24rpx;
		padding: 10rpx 15rpx;
		box-sizing: border-box;
		margin-top: 16rpx;
	}

	.ticket-detail-comment-item {
		width: 100%;
		height: auto;
		margin-bottom: 10rpx;
	}

	.ticket-detail-btn-wrap {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 1PX solid #efefef;
	}

	.ticket-detail-btn {
		box-sizing: border-box;
		border: none;
		width: 90%;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20rpx;
		color: #fff;
		font-size: 28rpx;
		font-weight: 400;
		background: linear-gradient(to right, $global-color-golden, #e0b455);
	}
</style>